<!DOCTYPE html>
<html>
<head>
    <title>备件选择清单</title>
    #parse("sys/header.html")
    <style>
        .delCss {
            background-color: #d2cece;
        }
    </style>

</head>
<body>
<div id="rrapp" v-cloak>
    <div>
        <Row :gutter="16" style="margin: 8px 0px 0px 1px">
            <div class="search-group">
                <i-col span="3">
                    <i-input v-model="q.name" @on-enter="query" placeholder="备件名称"></i-input>
                </i-col>
                <i-col span="3">
                    <i-input v-model="q.spec" @on-enter="query" placeholder="备件规格"></i-input>
                </i-col>
                <i-col span="3">
                    <i-input v-model="q.partCode" @on-enter="query" placeholder="备件编码"></i-input>
                </i-col>
                <i-col span="3">
                    <i-input v-model="q.erpCode" @on-enter="query" placeholder="ERP编码"></i-input>
                </i-col>
                <i-col span="3">
                    <i-input v-model="q.producor" @on-enter="query" placeholder="供应厂商"></i-input>
                </i-col>
                <i-button @click="query">查询</i-button>
                <i-button @click="reloadSearch">重置</i-button>
            </div>
        </Row>
        <table id="jqGrid"></table>
    </div>
</div>

<script>
    $(function () {
        $("#jqGrid").Grid({
            url: '../sparepart/list?status=1',
            colModel: [
                {label: '系统编码', name: 'partCode', index: 'PART_CODE', width: 80},
                {label: '名称', name: 'name', index: 'NAME', width: 80},
                {label: '是否有效', name: 'isValid', index: 'IS_VALID', width: 80,
                    formatter: function(cellvalue, options, rowObject) {
                        if (cellvalue === 1) {
                            return '有效';
                        } else if (cellvalue === 0) {
                            return '无效';
                        } else {
                            return '';
                        }
                    }
                },
                {label: '规格', name: 'spec', index: 'SPEC', width: 120},
                {
                    label: '类型', name: 'type', index: 'TYPE', width: 60,
                    formatter: function (value,options,row)  {
                        return sysEnums.SPARE_TYPE[value];
                    }
                },
                {label: '单位', name: 'unit', index: 'UNIT', width: 40},
                {
                    label: 'ABC类', name: 'planAbc', index: 'PLAN_ABC', width: 45,
                    cellattr: function(rowId, value, rawObject,row) {
                        var tooltipText = sysEnums.ABC_TYPE[value];
                        return 'title="' + tooltipText + '"';
                    }
                },
                {label: '生产厂家', name: 'producor', index: 'PRODUCOR', width: 80},
                {label: '价格', name: 'price', index: 'PRICE', width: 80},
                {label: 'ERP编码', name: 'erpCode', index: 'ERP_CODE', width: 80},
                {label: '安全库存', name: 'safeNum', index: 'SAFE_NUM', width: 60},
                {label: '库存', name: 'stockNum', index: 'STOCK_NUM', width: 60},
                {label: '在途数', name: 'transitNum', index: 'TRANSIT_NUM', width: 60},
                {name: 'id', key: true, hidden: true},
                {name: 'useUnit',hidden: true},
                {name: 'devType',hidden: true},
                {name: 'devTypeName',hidden: true},
                {name: 'reserve2',hidden: true},
                {name: 'procedure1',hidden: true}
            ],
            gridComplete: function () {
                // 对于无效的维修工单行背景渲染
                var ids = $('#jqGrid').getDataIDs();
                for (var i = 0; i < ids.length; i++) {
                    var rowData = $('#jqGrid').getRowData(ids[i]);
                    console.log('行数据',rowData.isValid)
                    if(rowData.isValid == "无效") {
                        $('#' + ids[i]).find("td").addClass("delCss");
                    }
                };
            },
            beforeSelectRow: function(rowid, e) {
                // 判断需要禁止选择的行记录的条件，例如根据行 ID 或者某个字段的值
                var rowData = $(this).jqGrid("getRowData", rowid);  // 获取行数据
                if (rowData.isValid == '无效') {
                    return false; // 返回false以阻止选中该行
                }
                return true;  // 允许选择其他行记录
            },
        });
    });
    let vm = new Vue({
        el: '#rrapp',
        data: {
            q: {
                partName: '', // 备件名称
                spec: '', // 备件规格
                partCode: '', // 备件编码
                erpCode: '', // ERP编码
                producor:'', // 供应厂家
            }
        },
        methods: {

            query: function () {
                vm.reload();
            },
            reload: function (event) {
                let page = $("#jqGrid").jqGrid('getGridParam', 'page');
                $("#jqGrid").jqGrid('setGridParam', {
                    postData: vm.q,
                    page: page
                }).trigger("reloadGrid");
            },
            reloadSearch: function () {
                vm.q = {
                    name: '', // 备件名称
                    spec: '', // 备件规格
                    partCode: '', // 备件编码
                    erpCode: '', // ERP编码
                    producor:'', // 供应厂家
                };
                vm.reload();
            }
        }
    });

    var getSparePart = function () {
        return getSelectedRowData('#jqGrid');
    }
</script>
</body>
</html>
